<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>进阶：20、开发插件</title>
	<script type="text/javascript" src="./js/vue.js"></script>
	<!-- <script type="text/javascript" src="./js/main.js"></script>	 -->
</head>
<body>
	<script type="text/javascript">
		// vue插件相比组件而言没有受到更多的关注，大家也更习惯于使用
		// 现成的插件如vue-router、vue-touch等，但插件的功能确实是很
		// 强大的，如果提取一些常用功能特性进行封装，就算不进行插件
		// 开发，了解vue插件的原理，也是大有裨益，当你使用别人开发的
		// 插件出现问题时，能快速定位排查。
		// 
		// 开发vue插件应当有一个公开方法install。这个方法的第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象:
		// MyPlugin.install = function (Vue, options) {
 		//   // 1. 添加全局方法或属性
		//   Vue.myGlobalMethod = function () {
		//     // 逻辑...
		//   }
		//   // 2. 添加全局资源
		//   Vue.directive('my-directive', {
		//     bind (el, binding, vnode, oldVnode) {
		//       // 逻辑...
		//     }
		//     ...
		//   })
		//   // 3. 注入组件
		//   Vue.mixin({
		//     created: function () {
		//       // 逻辑...
		//     }
		//     ...
		//   })
		//   // 4. 添加实例方法
		//   Vue.prototype.$myMethod = function (options) {
		//     // 逻辑...
		//   }
		// }
		
		
		// blabla一堆不如亲手做一个插件试试！
		// 在本网页的同级目录下的js目录有一个vue插件toast.js
		// 
		// 它的代码如下（代码解析参阅toast.js）：
		// # var Toast = {};
		// # Toast.install = function (Vue, options) {
		// #  Vue.prototype.$msg = 'Hello World';
		// # }
		// # module.exports = Toast;
		// 
		// 然后再同级目录下的main.js中使用这个插件
		// # import Vue from 'vue';
		// # import Toast from './toast.js';
		// # Vue.use(Toast);
		// 
		// 注意上面的js代码不能直接使用，浏览器识别不了
		// 需要 webpack 或 browserify 预编译成浏览器可以识别的js代码
	</script>
</body>
</html>